import { getUserListApi } from '@/api/system/user/user'
import { UserListParam } from '@/api/system/user/UserModel'
import { StatusCode } from '@/http/request'
import { nextTick, onMounted, reactive, ref } from 'vue'

export default function useUserTable() {
    // 容器的高度
    const containerHeight = ref(0)

    // 表格的高度
    const tableHeight = ref(0)

    // 定义表格的数据
    const tableData = reactive({
        list: []
    })
    // 表格的查询参数
    const listParam = reactive<UserListParam>({
        page_size: 20,
        current_page: 1,
        total: 0,
        username: '',
        status: '1'
    })
    // 查询表格
    const getUserList = async () => {
        let res = await getUserListApi(listParam)
        console.log('用户列表：', res)
        if (res && res.code == StatusCode.Success) {
            tableData.list = res.data.list
            // 设置分页总条数
            listParam.total = res.data.total
        }
    }

    // 页容量改变时触发
    const sizeChange = (size: number) => {
        listParam.page_size = size
        getUserList()
    }
    // 页数改变时触发
    const currentChange = (page: number) => {
        listParam.current_page = page
        getUserList()
    }
    // 搜索
    const searchBtn = () => {
        getUserList()
    }
    // 重置
    const resetBtn = () => {
        listParam.username = ''
        getUserList()
    }

    onMounted(() => {
        getUserList()
        nextTick(() => {
            containerHeight.value = window.innerHeight - 126
            tableHeight.value = window.innerHeight - 210
        })
    })

    return {
        tableData,
        listParam,
        getUserList,
        sizeChange,
        currentChange,
        searchBtn,
        resetBtn
    }
}
